import {useLayoutEffect, useState} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {Button, Icon, Radio} from 'tsun-smart-ui';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import EmptyContent from '@/components/EmptyContent';
import {stationApi} from '@/services/api/stationApi';
import useFetch from '@/hooks/useFetch';
import {useTranslation} from 'react-i18next';
import toast from '@/utils/toast';
const StationSelection = ({
  navigation,
  route: {
    params: {category},
  },
}: ReactNavigation.RootStackScreenProps<'StationSelection'>) => {
  const {t} = useTranslation();
  const {bottom} = useSafeAreaInsets();
  const [value, setValue] = useState<string>('');
  const {loading, data} = useFetch(stationApi.getUserStations);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Icon
          name="add"
          size={24}
          onPress={() => {
            navigation.navigate('CreatePowerStation', {
              category,
            });
          }}></Icon>
      ),
    });
  }, []);
  return (
    <View
      className=" flex-1 pt-4 px-4 justify-between"
      style={{
        paddingBottom: bottom || 24,
      }}>
      {loading ? (
        <ActivityIndicator></ActivityIndicator>
      ) : data?.records.length === 0 ? (
        <EmptyContent></EmptyContent>
      ) : (
        <Radio
          data={(data?.records ?? []).map(item => ({
            label: item.stationName,
            value: item.id + '',
          }))}
          value={value}
          onChange={setValue}
        />
      )}

      <View className="flex-1 justify-end">
        <Button
          title={t('settings.nextStep')}
          onPress={() => {
            if (value) {
              const station = data?.records.find(
                item => item.id === value,
              );
              navigation.navigate('Scan', {
                station,
                category,
              });
            } else {
              toast.error({
                message: t('sysrole.please_select') + t('monitor.stat'),
              });
            }
          }}
        />
      </View>
    </View>
  );
};

export default StationSelection;
